<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
	</head>
	<style type="text/css">
		.top1 {
			background-color: #F9F9FA;
			width: 100%;
		}
		
		.qq {
			padding-left: 300px;
		}
		
		.qq a {
			color: white;
			font-family: "微软雅黑";
			font-size: 15px;
		}
		
		.qq :hover {
			color: blue;
		}
		
		.qq2 a {
			color: grey;
		}
		
		.qq2 :hover {
			color: gray;
		}
	</style>

	<body>
		<div class="top1">
			<span style="padding-left: 400px;"><img src="img/2019-12-17_193459.png"></span>
			<span class="qq"><a href="#">注册</a></span>
		</div>
		<div class="container">
			<form id="form1" name="form1" onsubmit="return checkform()" method="get" action="GeRenZhuYe.html">
				<table align="center" id="tab">
					<div class="row">
						<div class=" col-md-2"></div>
						<div class=" col-md-4">
							<h4 style="padding-left: 120px; margin-bottom: 10px;margin-top: 20px;">百度账号</h4>
							<div><input type="text" class="form-control" placeholder="手机/邮箱/用户名" style="width: 300px;" name="txtUsreName" id="txtUsreName" onblur="testUName()"></div>
							<div style="margin-top: 15px;color: red;"><span id="spUserName"></span></div>
							<div style="margin-top: 20px;"><input type="password" class="form-control" placeholder="密码" style="width: 300px;" name="txtPwd" id="txtPwd" onblur="testPwd()"></div>
							<div style="margin-top: 15px;color: red;"><span id="spPwd"></span></div>
							<div style="padding-left: 200px; margin-top: 20px;">
								<a href="#">登录遇到问题</a>
							</div>
							<div><input type="submit" name="btnsubmit" id="btnsubmit" value="登录" style="width: 300px; height: 30px; margin-top: 10px; background-color:#3F89EC; color: white;"/></div>
							
						</div>
						<div class=" col-md-3" style="font-family: '微软雅黑'; font-size: 12px; ">
							<div style="margin-top: 20px;">
								<a href="#">爱奇艺pps</a>将获得以下权限：</div>
							<hr />
							<input type="button" value="全选" name="cd" onclick="zg()" /><br /><br />
							<input type="checkbox" value="1" name="cd" />访问您的个人资料等基础信息<br /><br />
							<input type="checkbox" value="2" name="cd" />我同意
							<a href="#">百度帐号连接协议</a><br /><br />

						</div>
						<div class=" col-md-3"></div>
					</div>
				</table>
			</form>
			<div class="container">
			<div class="row" style="padding-top: 30px;">
				<div class="col-md-12">
					<div class="text-center">
						<a href="index.html">其他登录方式</a>
					</div>
				</div>
			</div>
		</div>
			
		</div>

		<script type="text/javascript">
			var eats = document.getElementsByName("eats");

			function qx() {
				for(i = 0; i < eats.length; i++) {
					eats[i].checked = true;
				}
			}

			function qbx() {
				for(i = 0; i < eats.length; i++) {
					eats[i].checked = false;
				}
			}

			function fx() {
				for(var i = 0; i < eats.length; i++) {
					if(eats[i].checked == true) {
						eats[i].checked = false;
					} else if(eats[i].checked == false) {
						eats[i].checked = true;
					}
				}
			}
			var cd = document.getElementsByName("cd")

			function zg() {
				for(i = 0; i < cd.length; i++) {
					if(cd[i].checked == true) {
						cd[i].checked = false
					} else {
						cd[i].checked = true
					}
				}
			}
			//表单验证↓↓↓
			function testUName() {
				var uname = document.getElementById("txtUsreName").value;
				var sp = document.getElementById("spUserName");
				var reg = /^[A-Za-z0-9_\-\u4e00-\u9fa5]{3,6}$/;
				if(reg.test(uname)) {
					sp.innerHTML = "";
					return true;
				} else {
					sp.innerHTML = "用户名必须是3到6个字符";
					return false;
				}
			}

			function testPwd() {
				var pwd = document.getElementById("txtPwd").value;
				var sp = document.getElementById("spPwd");
				var reg = /^[A-Za-z0-9_-]{6,}$/;
				if(reg.test(pwd)) {
					sp.innerHTML = "";
					return true;
				} else {
					sp.innerHTML = "密码必须是六个字符以上";
					return false;
				}
			}

			function checkform() {
				if(testUName() && testPwd()) {
					alert("通过验证，可以提交")
					return true;

				} else {
					alert("验证有误，请审核完毕再提交")
					return false;
				}
			}
		</script>
	</body>

</html>